<template>
    <div> 
        <swiper ref="mySwiper1" :options="swiperOption">
            <!-- <swiper-slide v-for="item in SlidrImg" v-bind:key="item.id">
                <a href="javascript:;">
                    <img class="img" :src="item.url ? item.url : item" alt="商品图">
                </a>
            </swiper-slide> -->
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/card.jpg" alt="商品图">
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/card2.png" alt="商品图">
                </a>
            </swiper-slide>
            <swiper-slide>
                <a href="javascript:;">
                    <img class="img" src="@/assets/images/card.jpg" alt="商品图">
                </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-scrollbar"></div>
        </swiper>
    </div>
</template>
<script>
import Vue from "vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);

export default {
    props: {
        // SlidrImg:{
        //     type:Array,
        //     default:[{imgUrls:'@/assets/images.loading.gif'}],
        //     requried:true 
        // },
    },
    name: 'carrousel',
    data() {
        return {
            swiperOption: {
                // slidesPerView: 1,
                // // spaceBetween: 90,
                // speed: 1000,
                // initialSlide: 0,
                // autoplay: true,
                // loop: true,
                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true //点击分页器的指示点分页器会控制Swiper切换
                // },
                // // pagination: '.swiper-pagination',
                // // paginationClickable: true,
                loop : true,
                autoplay:true,
                pagination: {  //分页器
                    el: '.swiper-pagination',
                },

            }
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper1.swiper
        }
    },
    mounted() {
        
    },
    components: {
        
    },
    methods: {
        
    }
};
</script>

<style lang="scss">
// .swiper-scrollbar{
//     display: none;
// }
.img{
    width:600px;
    height: 380px;
    border-radius: 15px;
}
.swiper-container{
    height: 450px;
    .swiper-pagination-bullet{
        background-color: #888888;
        width:16px;
        height: 2px;
        border-radius: 3px;
        opacity: 1 !important;
        bottom: -10px;
    }
    .swiper-pagination-bullet-active{
        background-color: #fff;
        width:16px;
        height: 2px;
        border-radius: 3px;
    }
}
</style>

